<template>
  <div class="tags">
    <el-tag
        v-for="(tag,index) in tags"
        :key="tag.name"
        :closable="tag.name!== 'home'"
        :effect="tag.name==='home'?'dark':'plain'"
        @click="handleMenu(tag)"
        @close="handleClose(tag,index)"
    >
        {{ tag.label }}
    </el-tag>
  </div>
</template>


<script setup>
import { computed, ref } from 'vue'
import { useAllDataStore } from '@/stores'
import { useRouter, useRoute } from 'vue-router'
const store=useAllDataStore()
const tags=computed(()=>store.state.tags)
const route=useRoute()
const router=useRouter()
// 监听路由变化，更新当前菜单（点击跳转）
const handleMenu=(tag)=>{
    router.push(tag.name)
    store.selectMenu(tag)   
}
const handleClose=(tag,index)=>{
    //通过Pinia管理
    store.updateTags(tag)
    //
    if(tag.name!==route.name) return

    if(index===store.state.tags.length){
        store.selectMenu(tags.value[index-1] )
        router.push(tags.value[index-1].name)   
    }else {
        store.selectMenu(tags.value[index])
        router.push(tags.value[index].name)
    }
}

</script>



<style lang="less" scoped>
.tags{
    margin:20px 0 0 20px ;
}
.el-tag{
    margin-right: 10px;
}
</style>

